<template>
	<div>
		<div class="mui-content" style="margin-bottom: 35px;">
			<ul class="mui-table-view">
				<li v-if="item.docid" class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.docid">
					<router-link :to="'/home/newsinfo/' + item.docid">
						<img class="mui-media-object mui-pull-left" :src="item.url">
						<div class="mui-media-body">
							<h1>{{ item.title }}</h1>
							<p class="mui-ellipsis">
								<span>发表时间：{{ item.ptime | dateFormat }}</span>
								<span>点击：{{ item.tcount }}次</span>
							</p>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	
	export default {
		data(){
			return{
				newsList:[]
			}
		},
		methods:{
			getNewsList(){
// 				获取新闻列表
				this.$http.get('https://www.apiopen.top/journalismApi').then(result => {
					if(result.body.code === 200){
						this.newsList = result.body.data.ent
					}else{
						Toast('获取新闻列表失败！')
					}
				})
				
			}
		},
		created(){
			this.getNewsList()
		}
	}
</script>

<style lang="less" scoped="scoped">
	.mui-table-view-cell{
		h1{
			font-size: 14px;
			font-weight: 400;
			width: 280px;
			overflow: hidden;
			// white-space: nowrap;
			text-overflow: ellipsis;
		}
		.mui-ellipsis{
			font-size: 12px;
			color: #0069D9;
			display: flex;
			justify-content: space-between;
		}
	}
</style>
